<template>
  <!-- 展示全部订单的结构 -->
  <el-card class="box-card" style="width: 980px;margin: 20px;">
    <template #header>
      <div class="card-header">
        <span>挂号订单</span>
      </div>
    </template>
    <!-- 提供用户选择的下拉菜单 -->
    <el-form :inline="true">
      <el-form-item label="就诊人" style="width: 210px;">
        <el-select placeholder="请选择就诊人" v-model="patientId" @change="getOrderInfo()">
          <el-option label="选择全部就诊人" value=""></el-option>
          <el-option v-for="item in allUser" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单状态" style="width: 230px;">
        <el-select placeholder="请选择订单状态" v-model="orderStatus" @change="getOrderInfo()">
          <el-option label="全部订单" value=""></el-option>
          <el-option v-for="(item,index) in allOrderState" :key="index" :label="item.comment" :value="item.status"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <!-- 表格展示订单的数据 -->
    <el-table border :data="allOrderArr">
      <el-table-column prop="reserveDate" label="就诊时间"/>
      <el-table-column prop="hosname" label="医院"/>
      <el-table-column prop="depname" label="科室"/>
      <el-table-column prop="title" label="医生"/>
      <el-table-column prop="amount" label="服务费"/>
      <el-table-column prop="patientName" label="就诊人"/>
      <el-table-column prop="param.orderStatusString" label="订单状态"/>
      <el-table-column prop="date" label="操作">
        <template #="{row}">
          <el-button type="text" @click="goDetail(row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      style="margin-top: 20px;"
      v-model:current-page="pageNo"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 30, 40]"
      :background="true"
      layout="prev, pager, next, jumper,->, sizes, total"
      :total="total"
      @current-change="handler1"
      @size-change="handler2"
    />
  </el-card>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import {reqUserOrderInfo,reqOrderState,reqAllUser} from '../../../../api/user'
import type {UserOrderInfoResponseData,Records,AllUserResponseData,
  AllOrderStateResponseData,AllOrderState,AllUser} from '../../../../api/user/type'
import { useRouter } from 'vue-router';
// 获取路由器对象
let $router = useRouter();
// 当前分页器页码
let pageNo = ref<number>(1);
// 当前页码展示几条数据
let pageSize = ref<number>(10);
// 收集就诊人的id
let patientId = ref<string>('');
// 收集订单的状态
let orderStatus = ref<string>('');
// 存储全部的订单
let allOrderArr = ref<Records>([]);
// 存储订单的总个数
let total = ref<number>(0);
// 存储全部就诊人的信息
let allUser = ref<AllUser>([]);
// 存储全部订单状态
let allOrderState = ref<AllOrderState>([]);
// 组件挂载完毕
onMounted(()=>{
  // 获取订单的方法
  getOrderInfo();
  // 获取全部就诊人信息以及全部订单状态
  getData();
})
// 获取订单的方法
const getOrderInfo = async ()=>{
  let result:UserOrderInfoResponseData = await reqUserOrderInfo(pageNo.value,pageSize.value,patientId.value,orderStatus.value);
  if(result.code==200){
    allOrderArr.value = result.data.records
    total.value = result.data.total
  }
};
// 详情按钮的回调
const goDetail = (row:any)=>{
  $router.push({path:'/user/order',query:{orderId:row.id}})
}
// 分页器组件当前页码的时间回调
const handler1 = ()=>{
  getOrderInfo();
}
// 每页数据个数发生变化
const handler2 = ()=>{
  getOrderInfo();
}
// 获取全部就诊人信息以及全部订单状态的接口方法
const getData = async ()=>{
  // 获取全部就诊人信息
  let result:AllUserResponseData = await reqAllUser();
  allUser.value = result.data
  console.log(result);
  // 获取全部订单状态
  let result1:AllOrderStateResponseData = await reqOrderState();
  allOrderState.value = result1.data
  console.log(result1);
};
</script>

<style scoped>

</style>